feat: show remaining CDN & cache-miss egress #538

bajtos · 2026-01-07T11:12:47Z

Update the demo app to show remaining egress allowances for each data set where the FilBeam service is enabled.

Screenshot showing the new version in practice:

version 2 using FolderSync icon

version 1 using RefreshCw icon

Signed-off-by: Miroslav Bajtoš <[email protected]>

cloudflare-workers-and-pages · 2026-01-07T11:14:09Z

Deploying with Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status	Name	Latest Commit	Preview URL	Updated (UTC)
✅ Deployment successful! View logs	synapse-dev	`164bc70`	Commit Preview URL Branch Preview URL	Jan 14 2026, 11:27 AM

apps/synapse-playground/src/components/warm-storage/data-sets-section.tsx

packages/synapse-react/src/warm-storage/use-data-sets.ts

Signed-off-by: Miroslav Bajtoš <[email protected]>

packages/synapse-react/src/warm-storage/use-data-sets.ts

rvagg · 2026-01-08T08:04:27Z

This seems fine to me and I appreciate the AGENTS.md edits but I'm going to leave it to @hugomrdias to review

apps/synapse-playground/src/lib/utils.ts

- Change format to "Egress remaining: X GiB delivery · Y GiB cache-miss" - Remove FolderSync icon, keep Globe icon with tooltip "This data set is using CDN" - Use binary units (KiB, MiB, GiB, TiB) instead of decimal units Co-Authored-By: Claude Code <[email protected]> Signed-off-by: Miroslav Bajtoš <[email protected]>

bajtos · 2026-01-13T10:13:12Z

I addressed the review comments, this PR is ready for another round of reviews. 🙏🏻

pyropy

LGTM 👍🏻

hugomrdias · 2026-01-13T13:17:41Z

apps/synapse-playground/src/lib/utils.ts

+export function formatBytes(bytes: bigint | number): string {
+  const num = typeof bytes === 'bigint' ? Number(bytes) : bytes
+  if (num === 0) return '0 B'
+
+  const units = ['B', 'KiB', 'MiB', 'GiB', 'TiB']
+  const k = 1024
+  const i = Math.floor(Math.log(num) / Math.log(k))
+  const value = num / k ** i
+
+  return `${value.toFixed(2).replace(/\.?0+$/, '')} ${units[i]}`
+}


use https://github.com/sindresorhus/pretty-bytes

I cannot use pretty-bytes:

Note that it uses base-10 (e.g. kilobyte). Read about the difference between kilobyte and kibibyte.

FilBeam's pricing uses multiples of 1024, not base-10.

I could use byte-size (32 kB unpacked) or bytes-iec (23 kB unpacked), but do we really need to add so much weight to our dependencies?

If we keep the current implementation, then I propose moving the helper to synapse-core.

Any objections?

packages/synapse-react/src/warm-storage/use-data-sets.ts

hugomrdias · 2026-01-13T13:28:52Z

apps/synapse-playground/src/components/warm-storage/data-sets-section.tsx

-                        </TooltipContent>
-                      </Tooltip>
+                      <span className="flex items-center gap-1 text-sm text-muted-foreground">
+                        <Tooltip>


i would make a custom tooltip component wrapping the globe icon with all the cdn info, using a hook to fetch the data.

check the other hooks that use tanstack query to wrap fetchDataSetEgressQuota

I would make a custom tooltip component wrapping the globe icon with all the cdn info, using a hook to fetch the data.

Since we are fetching isCDN flag in a different network request than the egress quotas info, I feel it's better to keep the current globe & tooltip as-is, and let the new component handle only the part about egress quotas.

That's what I implemented in the new version.

OTOH, I can see how it would make sense to move the entire <span> into a new component, growing EgressQuotaDisplay to something like CdnDetails.

{dataSet.cdn && <CdnDetails dataSetId={dataSet.dataSetId}/>}

Is that what you had in mind?

Can you suggest a better name for this new component?

- Add filbeam module to synapse-core with getDataSetStats function - Use iso-web/http request lib with proper error handling - Add GetDataSetStatsError class for FilBeam API errors - Add parseBigInt validation for API response values - Create useEgressQuota hook in synapse-react - Remove egress quota fetching from useDataSets hook - Update playground to use new useEgressQuota hook Co-Authored-By: Claude Code <[email protected]> Signed-off-by: Miroslav Bajtoš <[email protected]>

Add unit tests for getStatsBaseUrl and validateStatsResponse functions. Export validateStatsResponse to enable direct testing without HTTP mocking. Also update AGENTS.md with testing guidelines: - Use assert.deepStrictEqual for object comparisons - Use parameterized tests with descriptive names Co-Authored-By: Claude Code <[email protected]> Signed-off-by: Miroslav Bajtoš <[email protected]>

just in case Signed-off-by: Miroslav Bajtoš <[email protected]>

bajtos · 2026-01-14T12:18:23Z

@hugomrdias I addressed your comments, PTAL again.

bajtos · 2026-01-14T15:08:01Z

apps/synapse-playground/src/components/warm-storage/data-sets-section.tsx

@@ -1,9 +1,9 @@
 import type { DataSetWithPieces, UseProvidersResult } from '@filoz/synapse-react'
-import { useDeletePiece } from '@filoz/synapse-react'
+import { useDeletePiece, useEgressQuota } from '@filoz/synapse-react'


Should we find a better name for this hook? E.g. useFetchEgressQuotas?

what is a fetch egress quota? I don't think I've heard the term before

The proposed name is a combination of the "use" prefix, followed by a verb ("to fetch"), followed by the object ("egress quota").

Similarly to how `useDeletePiece" is a combination of the "use" prefix, the verb "to delete", and the object "piece".

How about useGetEgressQuotas - is that easier to understand?

Oh I see! I thought this was about a type of egress quota. I don't think we need a verb here, like there's also useState, and not useSetAndRetrieveState. I'd say useDeletePiece is a bit odd, but there the verb makes sense, since it's only one particular piece action.

bajtos · 2026-01-14T15:09:00Z

apps/synapse-playground/src/lib/utils.ts

+export function formatBytes(bytes: bigint | number): string {
+  const num = typeof bytes === 'bigint' ? Number(bytes) : bytes
+  if (num === 0) return '0 B'
+
+  const units = ['B', 'KiB', 'MiB', 'GiB', 'TiB']
+  const k = 1024
+  const i = Math.floor(Math.log(num) / Math.log(k))
+  const value = num / k ** i
+
+  return `${value.toFixed(2).replace(/\.?0+$/, '')} ${units[i]}`
+}


If we keep the current implementation, then I propose moving the helper to synapse-core.

Any objections?

bajtos · 2026-01-14T15:10:20Z

packages/synapse-react/src/warm-storage/use-egress-quota.ts

+
+  return useQuery({
+    ...props.query,
+    queryKey: ['synapse-filbeam-egress-quota', chainId, dataSetId?.toString()],


Should this use the plural "quotas"?

Suggested change

queryKey: ['synapse-filbeam-egress-quota', chainId, dataSetId?.toString()],

queryKey: ['synapse-filbeam-egress-quotas', chainId, dataSetId?.toString()],

bajtos added 2 commits January 7, 2026 12:06

feat: show remaining CDN & cache-miss egress

fd491d0

Signed-off-by: Miroslav Bajtoš <[email protected]>

chore: document synapse-react in AGENTS.md

9aa16b7

Signed-off-by: Miroslav Bajtoš <[email protected]>

bajtos requested review from juliangruber and pyropy January 7, 2026 11:12

bajtos requested review from hugomrdias and rvagg as code owners January 7, 2026 11:12

github-project-automation bot added this to FOC Jan 7, 2026

github-project-automation bot moved this to 📌 Triage in FOC Jan 7, 2026

juliangruber approved these changes Jan 7, 2026

View reviewed changes

apps/synapse-playground/src/components/warm-storage/data-sets-section.tsx Outdated Show resolved Hide resolved

packages/synapse-react/src/warm-storage/use-data-sets.ts Outdated Show resolved Hide resolved

bajtos added 3 commits January 7, 2026 12:25

fixup! cache-miss icon RefreshCW -> FolderSync

2132a05

Signed-off-by: Miroslav Bajtoš <[email protected]>

fixup! npm run lint:fix

f029bc4

Signed-off-by: Miroslav Bajtoš <[email protected]>

fixup! code cleanup + better error logging

b1f0f04

Signed-off-by: Miroslav Bajtoš <[email protected]>

bajtos mentioned this pull request Jan 7, 2026

feat: access stats from browsers filbeam/worker#539

Merged

rjan90 moved this from 📌 Triage to 🔎 Awaiting review in FOC Jan 7, 2026

rjan90 added this to the M4: Filecoin Service Liftoff milestone Jan 7, 2026

bajtos mentioned this pull request Jan 7, 2026

fix: change FilBeam URL to stats.filbeam.com #539

Merged

fixup! forgotten err

10c3811

Signed-off-by: Miroslav Bajtoš <[email protected]>

bajtos commented Jan 7, 2026

View reviewed changes

packages/synapse-react/src/warm-storage/use-data-sets.ts Outdated Show resolved Hide resolved

Merge branch 'master' into feat-egress-allowance

c0bbd0e

rjan90 moved this from 🔎 Awaiting review to ✔️ Approved by reviewer in FOC Jan 7, 2026

rjan90 assigned bajtos Jan 7, 2026

rvagg removed their request for review January 8, 2026 08:04

BigLep moved this from ✔️ Approved by reviewer to 🔎 Awaiting review in FOC Jan 8, 2026

pyropy reviewed Jan 12, 2026

View reviewed changes

apps/synapse-playground/src/lib/utils.ts Outdated Show resolved Hide resolved

bajtos requested review from juliangruber and pyropy January 13, 2026 10:12

pyropy approved these changes Jan 13, 2026

View reviewed changes

hugomrdias requested changes Jan 13, 2026

View reviewed changes

github-project-automation bot moved this from 🔎 Awaiting review to ⌨️ In Progress in FOC Jan 13, 2026

bajtos and others added 3 commits January 14, 2026 11:31

fix: add PiB and EiB to formatBytes helper

725f20b

just in case Signed-off-by: Miroslav Bajtoš <[email protected]>

bajtos requested a review from hugomrdias January 14, 2026 12:17

bajtos moved this from ⌨️ In Progress to 🔎 Awaiting review in FOC Jan 14, 2026

juliangruber approved these changes Jan 14, 2026

View reviewed changes

bajtos commented Jan 14, 2026

View reviewed changes

	queryKey: ['synapse-filbeam-egress-quota', chainId, dataSetId?.toString()],
	queryKey: ['synapse-filbeam-egress-quotas', chainId, dataSetId?.toString()],

feat: show remaining CDN & cache-miss egress #538

Are you sure you want to change the base?

feat: show remaining CDN & cache-miss egress #538

Uh oh!

Conversation

bajtos commented Jan 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

cloudflare-workers-and-pages bot commented Jan 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Deploying with Cloudflare Workers

Uh oh!

Uh oh!

Uh oh!

Uh oh!

rvagg commented Jan 8, 2026

Uh oh!

Uh oh!

bajtos commented Jan 13, 2026

Uh oh!

pyropy left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

bajtos commented Jan 14, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

bajtos Jan 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

bajtos commented Jan 7, 2026 •

edited

Loading

cloudflare-workers-and-pages bot commented Jan 7, 2026 •

edited

Loading

bajtos Jan 15, 2026 •

edited

Loading